<style>
    .img-box {
        position: relative;
        overflow: hidden;
        width: 230px;
        height: 150px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border: 1px #efefed solid;
        color: #76838f;
    }

    .img-box img {
        max-width: 100%;
    }

    .layui-col-md3 {
        padding: 0 10px;
        text-align: center
    }

    .media-body {
        padding: 10px 5px;
        border: 1px solid rgb(231, 231, 235);
    }

    .media-btn {
        margin-top: 10px;
        text-align: center
    }

    .media-desc img {
        width: 100%;
        height: 180px;
    }

    .mdedia-lists-box {
        border-bottom: 1px solid rgb(231, 231, 235);
        display: inline-block;
        padding: 5px 0 5px 0px;
        height: 48px;
        width: 100%;
    }

    .media-img-box img {
        width: 100%;
        height: 48px;
    }

    .media-content {
        position: relative;
        height: 180px;
    }

    .media-content img {
        width: 100%;
        height: 180px;
    }

    .media-desc {

        position: absolute;
        background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
        color: #ffffff;
        width: 100%;
        bottom: 0;
        height: 45px;
        text-align: left;
    }
</style>
<fieldset class="layui-elem-field layui-field-title">
    <blockquote class="layui-elem-quote">
        <label htmlFor="">{$member.nickname}</label>
        <div class="layui-input-inline">
            <img width="50" src="{$member.headimgurl}" alt="">
        </div>
    </blockquote>

</fieldset>
<form class="layui-form" action="">
    <input name="material_id" type="hidden" value="">
    <input name='type' type="hidden" value="text">
    <div class="layui-tab layui-tab-brief" lay-filter="reply">
        <ul class="layui-tab-title">
            <li class="layui-this" data-type="text">文本内容</li>
            <li data-type="image">图片</li>
            <li data-type="news">图文</li>
            <li data-type="video">视频</li>
            <li data-type="vioce">音频</li>
        </ul>
        <div class="layui-tab-content" style="padding: 15px;">
            <div class="layui-tab-item layui-show text">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">回复内容</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="data"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item image">
                <div class="img-box" id="image">
                    <img src="__CDN____STATIC__/wechat/images/add-img.png" alt=""
                         style="height:auto;padding-top:40px">
                    <div class="bottomBar">点击选择</div>
                </div>
                <div class="layui-row " style="display:none">
                    {volist name="materialGroup['image']" id="vo"}
                    <div class="layui-col-md3">
                        <div class="media-body">
                            <div class="media-time">
                                发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                            </div>
                            <span style="display: block;">
                              <div class="media-content">
                                <div class="media-desc"><p class="media-desc-sp"></p></div>
                                <img class="media-img" width="100%" height="180" src="{$vo.local_cover}">
                              </div>
                            </span>
                            <div>
                                <ul>
                                </ul>
                            </div>
                            <div class="media-item-type2">
                                <div class="layui-btn-group media-btn">
                                    <a href="javascript:;" data-id="{$vo.id}" data-type="image"
                                       class="layui-btn layui-btn-primary layui-btn-sm select">
                                        <i class="layui-icon"></i>选择
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                    {/volist}
                </div>
            </div>
            <div class="layui-tab-item news">
                <div class="img-box" id="news">
                    <img src="__CDN____STATIC__/wechat/images/add-img.png" alt=""
                         style="height:auto;padding-top:40px">
                    <div class="bottomBar">点击选择</div>
                </div>
                <div class="layui-row " style="display:none">
                    {volist name="materialGroup['news']" id="vo"}
                    <div class="layui-col-md3">
                        <div class="media-body">
                            <div class="media-time">
                                发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                            </div>
                            <span style="display: block;">
                             <div class="media-content">
                                 <div class="media-desc">
                                     <p class="media-desc-sp">{if isset($vo['item_info'][0]['title'])}{$vo['item_info'][0]['title']}{/if}</p>
                                 </div>
                                    <img class="media-img"
                                         src="{if isset($vo['item_info'][0]['cover'])}{$vo['item_info'][0]['cover']}{/if}">
                              </div>
                        </span>
                            <!--                                //多图文&ndash;&gt;-->
                            {if count($vo['item_info'])>1}
                            <div>
                                <ul>
                                    {volist name="vo.item_info" id="v" offset='1' }
                                    <li>
                                        <div class="mdedia-lists-box">
                                            <div class="media-title-box layui-col-md9 fl">
                                                {$v.title}
                                            </div>
                                            <div class="media-img-box layui-col-md3 fr">
                                                <img class="media-lists-img" src="{$v.cover}">
                                            </div>
                                        </div>
                                    </li>
                                    {/volist}
                                </ul>
                            </div>
                            {/if}
                            <div class="media-item-type2">
                                <div class="layui-btn-group media-btn">
                                    <a href="javascript:;" data-id="{$vo.id}" data-type="news"
                                       class="layui-btn layui-btn-primary layui-btn-sm select">
                                        <i class="layui-icon"></i>选择
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>

                    {/volist}
                </div>
            </div>
            <div class="layui-tab-item video">
                <div class="img-box" id="video">
                    <img src="__CDN____STATIC__/wechat/images/add-img.png" alt=""
                         style="height:auto;padding-top:40px">
                    <div class="bottomBar">点击选择</div>
                </div>
                <div class="layui-row " style="display:none">
                    {volist name="materialGroup['video']" id="vo"}
                    <div class="layui-col-md3">
                        <div class="media-body">
                            <div class="media-time">
                                发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                            </div>
                            <span style="display: block;">
                             <div class="media-content">
                                 <div class="media-desc">
                                     <p class="media-desc-sp"></p>
                                 </div>
                                 <div style="font-size: 50px;height: 180px;line-height:180px;text-align: center">
                                     <i class="fa fa-play-circle-o"></i>
                                 </div>
                              </div>
                        </span>
                            <!--                                //多图文&ndash;&gt;-->

                            <div class="media-item-type2">
                                <div class="layui-btn-group media-btn">
                                    <a href="javascript:;" data-id="{$vo.id}" data-type="video"
                                       class="layui-btn layui-btn-primary layui-btn-sm select">
                                        <i class="layui-icon"></i>选择
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                    {/volist}
                </div>
            </div>
            <div class="layui-tab-item voice">
                <div class="img-box" id="voice">
                    <img src="__CDN____STATIC__/wechat/images/add-img.png" alt=""
                         style="height:auto;padding-top:40px">
                    <div class="bottomBar">点击选择</div>
                </div>
                <div class="layui-row " style="display:none">
                    {volist name="materialGroup['voice']" id="vo"}
                    <div class="layui-col-md3">
                        <div class="media-body">
                            <div class="media-time">
                                发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
                            </div>
                            <span style="display: block;">
                             <div class="media-content">
                                 <div class="media-desc">
                                     <p class="media-desc-sp"></p>
                                 </div>
                                 <audio class="media-img" src="{$vo.local_cover}"></audio>
                              </div>
                        </span>
                            <!--                                //多图文&ndash;&gt;-->

                            <div class="media-item-type2">
                                <div class="layui-btn-group media-btn">
                                    <a href="javascript:;"
                                       data-id="{$vo.id}" data-type="video"
                                       class="layui-btn layui-btn-primary layui-btn-sm select">
                                        <i class="layui-icon"></i>选择
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                    {/volist}
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">立即发送</button>
        </div>
    </div>
</form>
<script>
    var openid = '{$member.openid}';
</script>